import React from 'react'
import { Layout, Menu, theme, Radio, Badge, Descriptions } from 'antd'
import '../../Assets/home.css'
import phone from "../../utils/product.json"
import '../../Assets/phone1.css'
import CommentSection from "../../components/CommentSection"
import Counter from "../../components/Counter"
import S1 from "../../components/Switch"
import SearchInput from "../../components/SearchInput"
const { Header, Content, Footer } = Layout

//颜色单选框组件
const R1 = () => (
    <Radio.Group name="radiogroup" defaultValue={1}>
        <Radio value={1}>{phone[2].color1}</Radio>
        <Radio value={2}>{phone[2].color2}</Radio>
    </Radio.Group>
)
//选择版本单选框组件
const Ri1 = () => (
    <>
        <Radio.Group
            defaultValue="a"
            size="small"
            style={{
                marginTop: 16,
            }}
        >
            <Radio.Button value="a">{phone[2].version1}</Radio.Button>
            <Radio.Button value="b">{phone[2].version2}</Radio.Button>
        </Radio.Group>
    </>
)
//选择套餐单选框组件
const Ri2 = () => (
    <>
        <Radio.Group
            defaultValue="a"
            size="small"
            style={{
                marginTop: 16,
            }}
        >
            <Radio.Button value="a">官方标配 (含官方标配)</Radio.Button>
            <Radio.Button value="b">全心保</Radio.Button>
        </Radio.Group>
    </>
)
const items = [
    {
        key: '1',
        label: '产品',
        children: phone[2].name,
    },
    {
        key: '2',
        label: '售价',
        children: phone[2].price,
    },
    {
        key: '3',
        label: '库存',
        children: '库存充足',
    },
    {
        key: '4',
        label: '发售时间',
        children: '2023年8月29日',
    },
    // {
    //     key: '5',
    //     label: 'Usage Time',
    //     children: '2019-04-24 18:00:00',
    //     span: 2,
    // },
    {
        key: '6',
        label: '状态',
        children: <Badge status="processing" text="在售" />,
        span: 3,
    },
    {
        key: '7',
        label: phone[2].version1,
        children: '9999.00',
    },
    {
        key: '8',
        label: phone[2].version2,
        children: '8999.00',
    },
    {
        key: '9',
        label: '折扣',
        children: '50',
    },
    // {
    //     key: '10',
    //     label: 'Config Info',
    //     children: (
    //         <>
    //             Data disk type: MongoDB
    //             <br />
    //             Database version: 3.4
    //             <br />
    //             Package: dds.mongo.mid
    //             <br />
    //             Storage space: 10 GB
    //             <br />
    //             Replication factor: 3
    //             <br />
    //             Region: East China 1
    //             <br />
    //         </>
    //     ),
    // },
]
const ProductDetail = () => <Descriptions title="产品信息表" bordered items={items} />
//主页面组件
const App = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken()
    let layout = <><Layout className="layout">
        <Header
            style={{
                display: 'flex',
                alignItems: 'center',
                margin: 0,
                padding: 0
            }}
        >
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={['1']}
                items={[
                    { key: '1', label: '华为官网' },
                    { key: '2', label: '关于我们' },
                    { key: '3', label: '服务大厅' },
                    { key: '4', label: '联系我们' },
                ]}
            />
        </Header>
        <Content>
            <div
                className="site-layout-content"
                style={{
                    background: colorBgContainer,
                }}
            >
                <img src="/file/huaweilogo.jpg" alt="华为图标" id="logo" />
                <a href="http://localhost:3000/home" id="title1">华为</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pageId=401109410" id="title2">鸿蒙智行</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pn=zhixuanpc" id="title3">华为智选</a>
                <a href="https://www.vmall.com/portal/activity/index.html?pn=harmonyosconnectpc"
                    id="title4">生态周边</a>
                <SearchInput />
                {/* <form id="searchForm">
                    <input type="text" placeholder="请输入搜索内容" id="search"/>
                    <input type="submit" value="提交" id="submit"/>
                </form> */}
                <div id="salephonebox">
                    <div id="phonepicture">
                        <img src="/phone/HUAWEI%20Mate%2060%20Pro+.png" />
                    </div>
                    <div id="star"><S1 /><p>收藏</p></div>
                    <div id="saleform">
                        <div className="product-container">
                            <h1>{phone[2].name}</h1>
                            <p>{phone[2].description}</p>
                            <div className="price-box">
                                <span className="price">¥{phone[2].price}</span>
                            </div>
                            <div className="shipping-info">
                                <p>现货速发 现货快速直达，快享同城~</p>
                            </div>
                            <div className="product-options">
                                <div className="options-container"> {/* 新增加的容器 */}
                                    <div className="option">
                                        <label>选择颜色</label>
                                        <R1 />
                                    </div>
                                    <div className="option">
                                        <label>选择版本</label>
                                        <Ri1 />
                                    </div>

                                    <div className="option">
                                        <label>选择套餐</label>
                                        <Ri2 />
                                    </div>
                                </div>
                                <div class="quantity-selector">
                                    <label>数量</label>
                                    <Counter />
                                </div>
                                <div class="buy-button">
                                    <button>立即购买</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="producttable"><ProductDetail /></div>
                <h1 id="commenttitle">评论区</h1>
                <CommentSection />
            </div>
        </Content>
        <Footer className="layout-footer">
            <div className="footer-links">
                <img src="/file/huaweilogo.jpg" alt="华为logo" id="footerlogo" />
                <a href="https://www.huawei.com/cn/">华为集团</a> |
                <a href="https://consumer.huawei.com/cn/">消费者业务网站</a> |
                <a href="https://appgallery.huawei.com/Featured">华为应用市场</a>|
                <a href="https://cloud.huawei.com/">华为终端空间</a>|
                <a href="https://developer.huawei.com/cn/">开发者联盟</a>|
                <a href="https://www.vmall.com/portal/activity/index.html?pageId=401001427">华为商城手机版</a>|
            </div>
            <div className="footer-text">
                本网站上的内容属于华为技术有限公司所有。
            </div>
        </Footer>
    </Layout></>
    return layout
}
export default App